<template>
    <div id="btu"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { defineProps } from 'vue';

const props = defineProps({
    datadeep: Array,
    // required: true
});
console.log(props, 'mem')
const chartsY: any = ref();
const aa: any = ref();
let dept = ref()
dept.value = props.datadeep
console.log(props.datadeep, 'mem')
const bt = () => {
    var chartDom = document.getElementById('btu')!;
    var myChart = echarts.init(chartDom);
    window.addEventListener('resize', () => {
        myChart.resize()
        setTimeout(() => {
            myChart.resize()

        }, 500);
    })
    const option = {
        // backgroundColor: '#0E1327',
        graphic: [{
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: aa.value + '人',
                fill: '#fff',
                fontSize: 18,
            },
        }],
        tooltip: {
            trigger: 'item',
            formatter: '{b}:({c}人-{d}%)',
        },

        grid: {
            containLabel: true,
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['50%', '50%'],
                // color: [
                //     '#8E35FF',
                //     '#FFB933',
                //     '#2CAA3F',
                //     '#1983FF',
                //     '#8BCE1D',
                //     '#D170FF',
                //     '#F46D4F',
                //     '#FA9A09',
                //     '#FF317B',
                //     '#444444',
                //     '#BDBDBD',
                //     '#D01505',
                //     '#D5D5D5',
                //     '#D70303',
                // ],
                label: {
                    position: 'outside',
                    show: true,
                    color: '#fff',
                    // textBorderColor: 'inherit',
                    textBorderWidth: 1,
                    fontSize: 10,
                    formatter: function (params) {
                        if (params.name !== '') {
                            return `${params.name}${params.percent}%( ${params.value})`;
                        }
                    },
                },
                labelLine: {
                    show: true,
                    length2: 10,
                    length: 10,
                },
                data: chartsY.value
            },
        ],
    }

    //  {
    //     // backgroundColor: '#fff',
    //     tooltip: {
    //         trigger: 'item'
    //     },
    //     title: {
    //         text: zong.value + '人',
    //         left: '50%',
    //         top: '50%',
    //         textStyle: {
    //             color: '#fff',
    //             fontSize: 10,
    //         },
    //         itemGap: 0,
    //         padding: 0,
    //         textVerticalAlign: 'middle',
    //         textAlign: 'center',
    //     },
    //     series: [
    //         {
    //             name: 'Access From',
    //             type: 'pie',
    //             radius: ['30%', '45%'],
    //             center: ['50%', '50%'],
    //             data: chartsY.value,
    //             labelLine: {
    //                 length: '2%',
    //                 length2: 60,
    //             },
    //             label: {
    //                 position: 'outside',
    //                 formatter: (fp) => {
    //                     return `{name|${fp.data.name}}\n\n{num|${fp.data.value}}条 {zb|${fp.percent}}%`
    //                 },
    //                 distanceToLabelLine: -40,
    //                 rich: {
    //                     num: {
    //                         fontSize: 7,

    //                     },
    //                     zb: {
    //                         fontSize: 7,
    //                     },
    //                     name: {
    //                         fontSize: 7,
    //                     }
    //                 }
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                 }
    //             },
    //             z: 2,
    //         },
    //         {
    //             name: 'Access From',
    //             type: 'pie',
    //             radius: '50%',
    //             data: chartsY.value,
    //             itemStyle: {
    //                 opacity: 0,
    //             },
    //             label: {
    //                 show: false,
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)',
    //                     opacity: 1
    //                 }
    //             },
    //             z: 3
    //         }
    //     ]
    // };
    option && myChart.setOption(option);
}
const debouncedResize = debounce(bt, 1000);
function debounce(func: { (): void; apply?: any; }, delay: number | undefined) {
    let timeoutId: number | undefined;

    return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}
watch(props, () => {
    console.log('props.datadeep', props.datadeep)
    chartsY.value = props.datadeep && props.datadeep.map((item: any) => {
        return {
            name: item.name,
            value: item.count
        };
    })
    aa.value = props.datadeep && props.datadeep.reduce((total: any, item: any) => total + item.count, 0);
    debouncedResize()
})
</script>

<style lang="scss" scoped>
@function torem($px) {
    //$px为需要转换的字号
    @return $px / 14px * 0.14rem; //100px为根字体大小
}

#btu {
    width: 100%;
    height: torem(300px);
}
</style>